<template>
	<view :style="themeColor()" class="bg-[#F6F6F6] min-h-[100vh]">
		<view v-if="!loading">
			<block v-if="config.is_fenxiao == 1">
				<view class=" h-[100rpx] box-border px-[var(--sidebar-m)] pt-[44rpx] flex flex-col justify-between"
					:style="getHeight">
					<view class="flex items-center">
						<view class="!w-[120rpx] !h-[120rpx] rounded-full flex-shrink-0 overflow-hidden">
							<u-avatar v-if="getDetail.headimg"
								:default-url="img('static/resource/images/default_headimg.png')"
								:src="img(getDetail.headimg)" size="120rpx" leftIcon="none"></u-avatar>
							<u-avatar v-else :src="img('static/resource/images/default_headimg.png')" size="120rpx"
								leftIcon="none"></u-avatar>
						</view>
						<view class="flex flex-col text-[#303133] ml-[32rpx]">
							<view class="text-[30rpx] truncate max-w-[520rpx]">
								<text class="font-bold whitespace-nowrap">{{ getDetail.username }}</text>
							</view>
							<!-- <view class="text-[24rpx] mt-[20rpx]" v-if="detail.parent_fenxiao">
								上级分销商：{{ detail.parent_fenxiao.nickname }}
							</view> -->
						</view>
					</view>
				</view>


				<!-- 开始 -->
				<view class="pt-[30rpx] text-[#fff] w-full  mt-10" :style="headerStyle">
					<view class="relative level-content sidebar-marign">
						<view class=" items-center ml-[10rpx] pt-3rpx">
							<text
								class="ml-[6rpx] mr-[10rpx] text-[#333] font-bold text-[32rpx] truncate max-w-[200rpx]">{{getDetail.two_level? getDetail.two_level.level_name : "会员"}}</text>
							<text v-if="currLevel.level_name"
								class="rounded-[50rpx] pt-[8rpx] pb-[6rpx] px-[10rpx] text-[20rpx] text-[#F7D6A7] bg-[#38311F]">已解锁</text>
							<image class="w-[230rpx] h-[200rpx] right-[40rpx] -top-[100rpx] absolute"
								:src="img('addon/shop_fenxiao/level/level_icon.png')" mode="aspectFill"></image>
						</view>
						<view v-if="levelList[currIndex+1]"
							class="text-[#8288A2] mt-[18rpx] flex items-center ml-[10rpx]">
							<!-- <text
								class="text-[#8288A2] text-[24rpx]">{{levelList[currIndex+1].upgrade_type == 1 ? t('arbitraryCondition') : t('allConditions') }}{{t('upgradable')}}</text> -->
							<text class="text-[#8288A2] text-[24rpx]">{{t('allConditions')}}为{{getDetail.two_level ? levelList[currIndex+1].level_name : levelList[currIndex].level_name }}</text>
							<view class="flex items-center text-[24rpx] ml-[16rpx] price-font">
								<text
									class="text-[#CD6C00]">{{ levelInfo.complete > levelInfo.task_num ? levelInfo.task_num : levelInfo.complete }}</text>
								<text class="text-[#8288A2]">/{{ levelInfo.task_num}}</text>
								<view class="">
								</view>
							</view>
						</view>
						<view class="flex my-[30rpx] ml-[10rpx]">
							<view class="flex-1 text-left"
								v-if="condition.fenxiao_config && condition.fenxiao_config.level >= 1">
								<view class="text-[#333] text-[24rpx]">直推分佣比例</view>
								<view class="mt-[16rpx] text-[#CD6C00] text-[36rpx]"> {{ getDetail.two_level ? parseFloat(getDetail.two_level.one_rate).toFixed(2) :getDetail.user_direct }}<text
										class="text-[24rpx] ml-[4rpx]">%</text></view>
							</view>
							<view class="flex-1 text-left" v-if= "getDetail.two_level?.level_id > 0">
								<view class="text-[#333] text-[24rpx]" >叠加补贴</view>
								<view class="mt-[16rpx] text-[#CD6C00] text-[36rpx]"> {{ getDetail.two_level ? parseFloat(getDetail.two_level.two_rate).toFixed(2) : '0' }}<text
										class="text-[24rpx] ml-[4rpx]">%</text></view>
							</view>
						</view>
						<scroll-view scroll-y="true"
							class="flex flex-col upgrade-content bg-[#fff] rounded-[12rpx] p-[20rpx] box-border"
							v-if="levelInfo && levelInfo.task">
							<view class="flex items-center justify-between"
								:class="{'pb-[20rpx]': (index != levelInfo.task.length-1)}"
								v-for="(item, index) in levelInfo.task" :key="index">
								<view class="flex flex-col flex-1">
									<text
										class="text-[28rpx] h-[40rpx] leading-[40rpx] text-[#333]">{{item.title}}</text>
									<view class="my-[10rpx] rounded-[12rpx] overflow-hidden">
										<progress :percent="item.progress" activeColor="#CD6C00"
											backgroundColor="#FAF0E5" stroke-width="4" />
									</view>
									<view class="flex items-center justify-between min-h-[34rpx]">
										<text class="text-[24rpx] text-[#8288A2] price-font">{{item.desc}}</text>
										<view class="flex items-center text-[26rpx] price-font">
											<text class="text-[#e7b667]">{{ item.value }}</text>
											<text class="text-[#bbb]">/{{ item.condition }}</text>
										</view>
									</view>
								</view>
								<text
									class="rounded-[50rpx] text-center ml-[30rpx] w-[120rpx] h-[54rpx] leading-[54rpx] text-[24rpx] text-[#F7D6A7] bg-[#38311F]"
									v-if="item.progress === 100">已达标</text>
								<text
									class="rounded-[50rpx] text-center ml-[30rpx] w-[120rpx] h-[54rpx] leading-[54rpx] text-[24rpx] text-[#F7D6A7] bg-[#38311F]"
									v-if="item.progress != 100">未达标</text>
							</view>
						</scroll-view>
					</view>
				</view>

				<view class="commission-bg sidebar-marign my-[20rpx] rounded-[16rpx] pb-[35rpx]">
					<view
						class="flex justify-between h-[90rpx] px-[24rpx] items-center border-0 border-b-[1rpx] border-[#E0E0E0] border-solid">
						<text class="text-[28rpx] font-bold">{{ t('billingInformation') }}</text>
						<view class="text-[#666] text-[26rpx]" @click="cashOutList">
							<text>佣金明细</text>
							<text class="nc-iconfont nc-icon-youV6xx text-[#666] !text-[26rpx]"></text>
						</view>
					</view>
					<view class="flex mt-[50rpx] justify-around commission-content">
						<!-- <view class="flex flex-col items-center" @click="toCommission" v-if="record">
							<text class="text-[22rpx] text-[#666]">{{ t('totalRevenue') }}</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{ parseInt(record.two_green_points) }}</text>
						</view> -->
						<!-- <view class="flex flex-col items-center" @click="toCommission"> -->
							<view class="flex flex-col items-center">
							<text class="text-[22rpx] text-[#666]">{{ t('DailyEarnings') }}</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{ parseInt(getDetail.day_income) }}</text>
						</view>
						<view class="flex flex-col items-center" >
							<text class="text-[22rpx] text-[#666]">个人消费额</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{ parseInt(record.two_order_performance) }}</text>
						</view>
						<!-- <view class="flex flex-col items-center" @click="redirect({url: '/addon/shop/pages/point/index'})"> -->
							<view class="flex flex-col items-center" >
							<text class="text-[22rpx] text-[#666]">{{ t('ComplexEliminationIntegral') }}</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{ parseInt(record.two_resale_points)  }}</text>
						</view>

					</view>
					<view class="flex mt-[50rpx] justify-around commission-content">
						<view class="flex flex-col items-center"  >
							<text class="text-[22rpx] text-[#666]">{{ t('totalRevenue') }}</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{ parseInt(record.two_green_points) }}</text>
						</view>
						
						
						<view class="flex flex-col items-center" @click="redirect({url: '/addon/shop_fenxiao/pages/two_child'})">
							<text class="text-[22rpx] text-[#666]">{{ t('feedbackBase') }}</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{getDetail.all_money}}</text>
						</view>
						<view class="flex flex-col items-center">
							<text class="text-[22rpx] text-[#666]">{{ t('freezePoints') }}</text>
							<text
								class="text-[#303133] text-[28rpx] font-bold mt-[20rpx]">{{ parseInt(getDetail.all_score) }}</text>
						</view>
					</view>
				</view>

				<view class="flex mt-2">
					<view class="flex px-[30rpx] rounded-[16rpx] items-center flex-1 sidebar-marign h-[140rpx] team-bg">
						<image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/fenxiao.png')"
							mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[26rpx]">总业绩</text>
							<text
								class="text-[#666] text-[24rpx] mt-[20rpx]">{{ parseInt(record.two_cumulative_performance)}}元</text>
						</view>
					</view>
					<view
						class="flex px-[30rpx] rounded-[16rpx] items-center flex-1 mr-[var(--sidebar-m)] h-[140rpx] fenxiao-bg"
						@click.stop="redirect({ url: '/addon/shop_fenxiao/pages/twoteam' })">
						<image class="w-[80rpx] h-[80rpx] mr-[24rpx]" :src="img('addon/shop_fenxiao/index/team1.png')"
							mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[26rpx]">我的团队</text>
							<text class="text-[#666] text-[24rpx] mt-[10rpx]">{{ parseInt(getDetail.all_two_pid_num) }}人</text>
						</view>
					</view>
				</view>

				<view class="flex mt-2">
					<view class="flex px-[30rpx] rounded-[16rpx] items-center flex-1 sidebar-marign h-[140rpx] team-bg">
						<image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/fenxiao.png')"
							mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[26rpx]">大部门总业绩</text>
							<text class="text-[#666] text-[24rpx] mt-[20rpx]">{{ parseInt(record.two_big_pid_num) }}元</text>
						</view>
					</view>
					<view
						class="flex px-[30rpx] rounded-[16rpx] items-center flex-1 mr-[var(--sidebar-m)] h-[140rpx] fenxiao-bg">
						<image class="w-[80rpx] h-[80rpx] mr-[24rpx]" :src="img('addon/shop_fenxiao/index/team1.png')"
							mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[26rpx]">小部门总业绩</text>
							<text
								class="text-[#666] text-[24rpx] mt-[10rpx]">{{ parseInt(record.two_small_pid_num) }}元</text>
						</view>
					</view>
				</view>
				<view class="flex mt-2">
					<view class="flex px-[30rpx] rounded-[16rpx] items-center  sidebar-marign h-[140rpx] team-bg w-[38%]">
						<image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/team_reward.png')"
							mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[26rpx]">有效业绩</text>
							<text class="text-[#666] text-[24rpx] mt-[20rpx]">{{ parseInt(record.effective_performance) }}元</text>
						</view>
					</view>
					<view class="flex px-[30rpx] rounded-[16rpx] items-center  sidebar-marign h-[140rpx] team-bg w-[38%]" v-if="record.is_team_leader === 1">
						<image class="w-[80rpx] h-[80rpx] mr-[20rpx]" :src="img('addon/shop_fenxiao/index/team_reward.png')"
							mode="widthFix" />
						<view class="flex flex-col">
							<text class="text-[26rpx]">资金池</text>
							<text class="text-[#666] text-[24rpx] mt-[20rpx]">{{ parseInt(record.pot_points) }}</text>
						</view>
					</view>
				</view>
			</block>
			<view v-else class="flex flex-col items-center justify-center noData">
				<image class="w-[260rpx] h-[152rpx]" mode="widthFix"
					:src="img('addon/shop_fenxiao/unopened-fenxiao.png')"></image>
				<view class="mt-[40rpx] text-[24rpx]">{{t('fenxiaoNotOpen')}}</view>
			</view>
		</view>
		<u-loading-page bg-color="rgb(248,248,248)" :loading="loading" loadingText="" fontSize="16"
			color="#333"></u-loading-page>
		<tabbar addon="shop" />
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, computed, onMounted } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import { moneyFormat, img, redirect } from '@/utils/common';
	import { t } from '@/locale';
	import {getFeedbackDetail, getFenxiaoDetail, getChildFenxiao, getFenxiaoTeam, getConfig } from '@/addon/shop_fenxiao/api/fenxiao';
	import useSystemStore from '@/stores/system'
	import { getLevelList } from '@/addon/shop_fenxiao/api/level';
	import { getMemberInfo } from '@/app/api/member'

	const systemStore = useSystemStore()
	let detail = ref({ 'member': {}, 'fenxiao_level': {} });
	let loading = ref<boolean>(true);
	// const record = ref(uni.getStorageSync("wap_member_info"))
	let record = ref('')
	let levelList = ref([]);
	let currLevel = ref({});
	let currIndex = ref(0);
	const getDetail = ref({})
	const getHeight = computed(() => {
		return {
			background: `url(${img('addon/shop_fenxiao/index/header_bg.png')}) left top / 100% 100% no-repeat`,
		}
	})

	const headerStyle = computed(() => {
		return {
			backgroundImage: 'url(' + img('addon/shop_fenxiao/level/level_top_bg.png') + ') ',
			backgroundSize: '100% 100%',
			backgroundRepeat: 'no-repeat'
		}
	})
	const getLevelListFn = () => {
		getLevelList().then((res : any) => {
			levelList.value = res.data.two;
			levelList.value.forEach((item, index) => {
				if (item.level_id == getDetail.value.two_level?.level_id) {
					currIndex.value = index;
					currLevel.value = item;
				}
			})
			loading.value = false;
		});
	}

	const levelInfo = computed(() => {
		if (levelList.value.length && levelList.value[currIndex.value]) {
			let level = getDetail.value.two_level? levelList.value[currIndex.value+1] : levelList.value[currIndex.value];
			let recommend = getDetail.value.two_pid_num
			let small_pid_num = getDetail.value.two_small_pid_num
			level.task = [];
			level.complete = 0;
	
			if (level.order_money ) {
				let task = {
					title: '直接分享人数',
					// desc: '已推荐' + moneyFormat(level.order_money) + '人',
					desc: '已推荐' + recommend + '人',
					condition: level.makers_num,
					value: recommend,
					progress: recommend >= level.makers_num ? 100 : (recommend / level.makers_num * 100).toFixed(2)
				}
				if (task.progress == 100) level.complete += 1;
				level.task.push(task);
			}
	
	
			if (level.order_money) {
				let task = {
					title: '小区业绩',
					desc: '小区业绩已达' + small_pid_num + '元',
					condition: level.small_order_money,
					value: small_pid_num,
					progress: parseFloat(small_pid_num) >= parseFloat(level.small_order_money) ? 100 : (parseFloat(small_pid_num) / parseFloat(level.small_order_money) * 100).toFixed(2)
				}
				if (task.progress == 100) level.complete += 1;
				level.task.push(task);
			}
	
			// level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
			level.task_num =  level.task.length;
			return level;
		}
	})
	onShow(() => {
		watch(
			() => systemStore.siteAddons,
			(newValue, oldValue) => {
				if (newValue && Object.keys(newValue).length) {
					if (!systemStore.siteAddons.includes('shop_fenxiao')) {
						uni.showToast({
							title: '该站点未安装分销插件',
							icon: 'none'
						});

						setTimeout(() => {
							if (getCurrentPages().length > 1) {
								uni.navigateBack({
									delta: 1
								});
							} else {
								redirect({
									url: '/addon/shop/pages/member/index',
									mode: 'reLaunch'
								});
							}
						}, 1500);
					}
				}
			},
			{ deep: true }
		)
		getConfigFn();
		getChildFenxiaoFn();
		getFenxiaoTeamFn();
		getMemberInfo().then((res : any) => {
			record.value = res.data
			getFeedbackDetails()
		})
		// getFenxiaoDetail().then((res : any) => {
		// 	let data = res.data;
		// 	if (Object.keys(data).length) {
		// 		detail.value = res.data;
		// 		loading.value = false;
		// 		getLevelListFn()
		// 	} else {
		// 		loading.value = true;
		// 		redirect({ url: '/addon/shop_fenxiao/pages/apply', mode: 'redirectTo' })
		// 	}
		// });
		const getFeedbackDetails = () => {
			let data = {
				member_id: record.value.member_id
			}
			getFeedbackDetail(data).then((res : any) => {
				getDetail.value = res.data.two
				loading.value = false;
				console.log(member.value)
				getLevelListFn()
			});
		}
	});

	const config : Record<string, any> = ref({})
	const condition = ref({})
	const getConfigFn = () => {
		getConfig().then((res : any) => {
			condition.value = res.data
			config.value = Object.assign(config.value, res.data.fenxiao_config)
		})
	}

	// 分销商数
	let childFenxiaoNum = ref(0);
	const getChildFenxiaoFn = () => {
		getChildFenxiao().then((res : any) => {
			childFenxiaoNum.value = res.data.length || 0;
		}).catch(() => {
			childFenxiaoNum.value = 0;
		})
	}

	// 我的团队数
	let fenxiaoTeamNum = ref(0);
	const getFenxiaoTeamFn = () => {
		getFenxiaoTeam().then((res : any) => {
			fenxiaoTeamNum.value = (res.data.direct.length + res.data.indirect.length) || 0;
		}).catch(() => {
			fenxiaoTeamNum.value = 0;
		})
	}

	// 申请提现
	const applyCashOut = () => {
		uni.setStorageSync('cashOutAccountType', 'commission')
		redirect({ url: '/app/pages/member/apply_cash_out' })
	}
	// 佣金明细
	const cashOutList = () => {
		redirect({ url: '/app/pages/member/two_detailed_account', param: { type: 'commission' } })
	}
	// 我的佣金
	const toCommission = () => {
		redirect({ url: '/app/pages/member/commission' })
	}
</script>

<style lang="scss" scoped>
	.level-wrap {
		background: linear-gradient(90deg, #FDE4C0, #FDC274);
	}

	.commission-bg {
		// background: linear-gradient(180deg, #FFF9F3 5%, #FFFFFF 25%, #FFFFFF 100%);
		background: #FFFFFF;
	}

	.team-bg {
		background: linear-gradient(135deg, #FFF9F9 10%, #FFFFFF 40%, #FFFFFF 100%);
	}

	.fenxiao-bg {
		background: linear-gradient(135deg, #F8FEFF 10%, #FFFFFF 40%, #FFFFFF 100%);
	}

	.commission-content>view {
		position: relative;
		width: 210rpx;

		&::after {
			content: "";
			position: absolute;
			width: 2rpx;
			height: 60rpx;
			background-color: #D9D9D9;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}

		&:last-of-type::after {
			width: 0;
			height: 0;
		}
	}

	.common-module>view {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			width: 2rpx;
			height: 80rpx;
			background-color: #E0E0E0;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}

		&:nth-child(3n+1)::after {
			width: 0;
			height: 0;
		}
	}

	/*  #ifdef  H5  */
	.noData {
		height: calc(100vh - 50px - constant(safe-area-inset-bottom) - 3.5rem) !important;
		height: calc(100vh - 50px - env(safe-area-inset-bottom) - 3.5rem) !important;
	}

	/*  #endif  */
	/*  #ifndef  H5  */
	.noData {
		height: calc(100vh - 100rpx - constant(safe-area-inset-bottom) - 3.5rem) !important;
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom) - 3.5rem) !important;
	}

	/*  #endif  */
</style>